<template>
    <div class="user-voucher" v-if="vouchers.length !=0">

       <div class="voucher voucher-title">
           <div class="uid">优惠码</div>
           <div class="amount">金额(元)</div>
           <div class="status">状态</div>
           <div class="created">领取时间</div>
           <div class="valid">有效时间</div>
       </div>

       <div class="voucher voucher-content" v-for="voucher in vouchers" v-bind:key="voucher.uid">
            <div class="uid">{{voucher.uid}}</div>
            <div class="amount">{{voucher.amount}}</div>
            <div class="status" v-if="voucher.status == 0">未使用</div>
            <div class="status" v-else>已使用</div>
            <div class="created">{{voucher.created_at}}</div>
            <div class="valid">{{voucher.valid_to}}</div>
       </div>
    </div>

    <div class="no-data" v-else>
        <img src="../../../static/img/no-data.png">
        <div class="no-data-tip">没有优惠卷</div>
    </div>
</template>

<script>
import GButton from '@/components/common/g-button'
import GInput from '@/components/common/g-input'
import { voucher as voucherAPI } from '@/api'

export default {
    name: 'user-voucher',
    data () {
        return {
            vouchers: []
        }
    },
    created() {
        this.updateVouchers();
    },
    methods: {
        async updateVouchers () {
            let result =await voucherAPI.getUserVouchers();

            if(result.data.code == 0 && result.data.data.length !=0) {
                this.vouchers = result.data.data;
            }
        }
    }
}
</script>

<style lang="scss">
@import 'common';
.user-voucher{
    .voucher{
        width: 100%;
        border-bottom: 1px solid $bdGray;
        font-size: 14px;
        div{
            display: inline-block;
        }
        .uid{
            width: 15%;
        }
        .amount{
            width: 15%;
        }
        .status{
            width: 15%;
        }        
        .created{
            width: 25%;
        }        
        .valid{
            width: 25%;
        }
    }
    .voucher-title{
        div{
            line-height: 60px;
        }
    }
    .voucher-content{
        div{
            line-height: 40px;
        }
    }
}

.no-data{
    text-align: center;
    .no-data-tip {
        font-size: 14px;
        margin-top: 16px;
        color: $gray;
    }
}
</style>
